<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:ui="http://java.sun.com/jsf/facelets">
    <html>

        <h:head>
            <meta charset="utf-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <meta name="description" content=""/>
            <meta name="author" content=""/>
            <title>Products | Social-NOSQL</title>
            <link href="css/bootstrap.min.css" rel="stylesheet"/>
            <link href="css/font-awesome.min.css" rel="stylesheet"/>
            <link href="css/prettyPhoto.css" rel="stylesheet"/>
            <link href="css/price-range.css" rel="stylesheet"/>
            <link href="css/animate.css" rel="stylesheet"/>
            <link href="css/main.css" rel="stylesheet"/>
            <link href="css/responsive.css" rel="stylesheet"/>
            <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
            <script src="js/respond.min.js"></script>
            <![endif]-->       
            <link rel="shortcut icon" href="images/ico/favicon.ico"/>
            <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png"/>
            <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png"/>
            <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png"/>
            <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png"/>

        </h:head>
        <h:body>

            <section>

                <div class="container">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="left-sidebar">

                                <div class="brands_products"><!--brands_products-->
                                    <h2>ESTADOS</h2>
                                    <div class="brands-name">
                                        <ul class="nav nav-pills nav-stacked">
                                            <li><a href=""> <span class="pull-right">(50)</span>downloaded</a></li>
                                            <li><a href=""> <span class="pull-right">(56)</span>Grüne Erde</a></li>
                                            <li><a href=""> <span class="pull-right">(27)</span>avg rating</a></li>
                                            <li><a href=""> <span class="pull-right">(32)</span>reviews</a></li>
                                        </ul>
                                    </div>
                                </div><!--/brands_products-->

                            </div>
                        </div>

                        <div class="col-sm-9 padding-right">
                            <div class="features_items"><!--features_items-->
                                <h2 class="title text-center">Productos </h2>
                                <h:form>         
                                    <p:dataScroller value="#{productoController.itemsProductos}" var="item" chunkSize="10">

                                        <h:panelGrid columns="2" style="width:100%" columnClasses="logo,detail">
                                            <p:graphicImage name="images/shop/product12.jpg" /> 

                                            <p:outputPanel>
                                                <h:panelGrid columns="2" cellpadding="5">
                                                    <h:outputText value="title: " />
                                                    <h:outputText value="#{item.title}" style="font-weight: bold"/>

                                                    <h:outputText value="ASIN: " />
                                                    <h:outputText value="#{item.ASIN}" style="font-weight: bold"/>

                                                    <h:outputText value="group:" />
                                                    <h:outputText value="#{item.group}" style="font-weight: bold"/>
                                                </h:panelGrid>
                                            </p:outputPanel>
                                        </h:panelGrid>
                                    </p:dataScroller>
                                </h:form>


                                <ul class="pagination">
                                    <li class="active"><a href="">1</a></li>
                                    <li><a href="">2</a></li>
                                    <li><a href="">3</a></li>
                                    <li><a href="">&raquo;</a></li>
                                </ul>
                            </div><!--features_items-->
                        </div>
                    </div>
                </div>

            </section>

            <script src="js/jquery.js"></script>
            <script src="js/price-range.js"></script>
            <script src="js/jquery.scrollUp.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/jquery.prettyPhoto.js"></script>
            <script src="js/main.js"></script>
        </h:body>
    </html>
</f:view>